<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<div class="card mb-4 shadow-sm">
    <div class="card-header bg-light">
        <h5 class="mb-0">热门文章</h5>
    </div>
    <div class="list-group list-group-flush" id="popularArticle">
        <%--通过ajax发出请求获取热门文章信息--%>
    </div>
</div>

<script>
    //加载页面请求热门文章
    $(function (){
        getPopularArticles();
    });
    //获取热门文章
    function getPopularArticles(){
        $.getJSON("${pageContext.request.contextPath}/article/popularArticles",
            [],function (data){
                console.log(data);
                $.each(data,function (index,item){
                    console.log(item);
                    var id = item.articleId;
                    var aHref = "${pageContext.request.contextPath}/article/articleDetail/"+id;
                    var aTag = $('<a>',{
                        class:"list-group-item list-group-item-action",
                        href:aHref
                    });
                    $("#popularArticle").append(aTag);

                    var inner_div = $('<div>',{
                        class:"d-flex w-100 justify-content-between"
                    });
                    aTag.append(inner_div);

                    var inner_h6 = $('<h6>',{
                        class:"mb-1"
                    });
                    inner_h6.text(item.articleTitle);
                    inner_div.append(inner_h6);

                    var inner_small = $('<small>');
                    inner_small.text(item.articleCreatePeriod);
                    inner_div.append(inner_small);

                    var inner_small_view = $('<small>',{
                        class:"text-muted"
                    });
                    var view_count = '阅读量：' + item.articleViewCount;
                    inner_small_view.text(view_count);
                    aTag.append(inner_small_view);
                });
            }
        );
    }
</script>